import React, { createRef } from "react";
import { Card, Row, Col, Table, message, Modal, Button, Badge, Form, Input, Select } from "antd";
import { FormComponentProps } from "antd/es/form/Form"; //获取Form表单的interface
import { FormItemProps } from "antd/lib/form/FormItem";
import { ColumnProps, SortOrder } from "antd/es/table";
import { PaginationConfig } from "antd/es/pagination/Pagination";
import { TableRowSelection, SorterResult } from "antd/es/table/interface";
import AJAX, { AJAXResponseConfig, AJAXRequestConfig } from "../../ajax/ajaxServer";
import { formatCarMode, formatOperationMode, formatAuthStatus, formatCityAdmins } from "../../utils/tools";
import { getPaginationConfig } from "../../utils/utils";
import { ResponseResult, OrderInfo } from "../../utils/interface";
import { CityName, CarMode, OperationMode, AuthStatus } from "../../config/selectConfig";
import "./index.less";

const FormItem = Form.Item;
const Option = Select.Option;

interface IProps {}

interface IStates {
	customData: Array<OrderInfo>;
	paginationConfig: PaginationConfig;
	isOpenCityModal: boolean;
}

class OrderPage extends React.Component<IProps, IStates> {
	paramConfig: any;

	// 这里的类型有bug
	// formRef = createRef<FormComponentProps>();
	formRef = createRef<any>();

	constructor(props: IProps, state: IStates) {
		super(props, state);
		this.state = {
			customData: [],
			paginationConfig: {},
			isOpenCityModal: false
		};
	}

	componentDidMount() {
		this.requestStandardDatas();
	}

	requestStandardDatas() {
		let config: AJAXRequestConfig = {
			url: "/api/order",
			params: this.paramConfig
		};
		AJAX.standardDataAPI<OrderInfo>(config).then(res => {
			this.setState({
				customData: res.lists,
				paginationConfig: getPaginationConfig(res, (page: number, pageSize?: number) => {
					this.paramConfig.page = page;
				})
			});
			// this.requestStandardDatas();
		});
	}

	handleOpenCity = () => {
		// Modal.confirm({
		// 	title: "开通城市"
		// });
		this.setState({
			isOpenCityModal: true
		});
	};

	modalHandlesubmit = () => {
		// '!' 使用非空断言 , 表示form这个属性一定存在
		let orderInfo = this.formRef.current.props!.form.getFieldsValue();

		let config: AJAXRequestConfig = {
			url: "/api/city/upDate",
			params: orderInfo
		};
		AJAX.standardDataAPI<OrderInfo>(config).then(
			res => {
				this.setState({
					customData: res.lists,
					paginationConfig: getPaginationConfig(res, (page: number, pageSize?: number) => {
						this.paramConfig.page = page;
					}),
					isOpenCityModal: false
				});
				this.requestStandardDatas();
				message.success("开通成功");
			},
			reason => {
				message.success("开通失败");
			}
		);
	};

	render() {
		const customColumns: Array<ColumnProps<OrderInfo>> = [
			{
				title: "订单编号",
				dataIndex: "order_sn"
			},
			{
				title: "车辆编号",
				dataIndex: "bike_sn"
			},
			{
				title: "用户名",
				dataIndex: "user_name"
			},
			{
				title: "手机号码",
				dataIndex: "mobile"
			},
			{
				title: "里程",
				dataIndex: "distance"
			},
			{
				title: "行驶时长",
				dataIndex: "total_time"
			},
			{
				title: "状态",
				dataIndex: "status"
			},
			{
				title: "开始时间",
				dataIndex: "start_time"
			},
			{
				title: "结束时间",
				dataIndex: "end_time"
			},
			{
				title: "实付金额",
				dataIndex: "user_pay"
			}
		];

		return (
			<div>
				<Card>
					<Row>
						<Col span={24}>{/* <FilterForm></FilterForm> */}</Col>
					</Row>
				</Card>
				<Card>
					<Row>{/* <Col span={24} style={{ marginBottom: "8px" }}>
							<Button type={"primary"} onClick={this.handleOpenCity}>
								开通城市
							</Button>
						</Col> */}</Row>
					<Row>
						<Col span={24}>
							<Table columns={customColumns} dataSource={this.state.customData} pagination={this.state.paginationConfig} rowKey={record => `${record.id}`}></Table>
						</Col>
					</Row>
				</Card>
				<Modal
					title="开通城市"
					width={"400px"}
					visible={this.state.isOpenCityModal}
					onCancel={() => {
						this.setState({
							isOpenCityModal: false
						});
					}}
					onOk={this.modalHandlesubmit}
				>
					{/* <ModalForm wrappedComponentRef={this.formRef}></ModalForm> */}
				</Modal>
			</div>
		);
	}
}

export default OrderPage;
